<!-- 文档 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title" :breadCrumb="breadCrumb"></pageHeaderNew>
    </template>
    <a-layout class="layout-demo">
      <a-layout-sider collapsible>
        <div class="logo" />
        <a-menu :style="{ width: '100%' }" @menu-item-click="onClickMenuItem">
          <!-- <a-menu-item key="1">
            <IconHome></IconHome>
            首页
          </a-menu-item> -->
          <a-menu-item key="2">
            <icon-share-alt />
            共享
          </a-menu-item>
          <a-menu-item key="3">
            <icon-star-fill />
            收藏
          </a-menu-item>
          <a-divider />
          <a-menu-item key="4">
            <icon-folder />
            个人文档
          </a-menu-item>
          <a-menu-item key="5">
            <icon-folder />
            公共文档
          </a-menu-item>
          <a-menu-item key="6">
            <icon-folder />
            知识库
          </a-menu-item>
        </a-menu>

        <!-- trigger -->
        <template #trigger="{ collapsed }">
          <IconCaretRight v-if="collapsed"></IconCaretRight>
          <IconCaretLeft v-else></IconCaretLeft>
        </template>
      </a-layout-sider>
      <a-layout>
        <a-layout>
          <a-layout-content>
            <Home v-if="menukey === '1'" />
            <ShareList v-if="menukey === '2'" />
            <PersonalDocuments v-if="menukey === '4'" />
            <PublicDocuments v-if="menukey === '5'" />
            <CollectList v-if="menukey === '3'" />
            <KnowledgeBase v-if="menukey === '6'" />
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </ContentCard>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue';
import Home from './components/Home.vue';
import PersonalDocuments from './PersonalDocuments/index.vue';
import PublicDocuments from './PublicDocuments/index.vue';
import ShareList from './ShareList/index.vue';
import CollectList from './CollectList/index.vue';
import KnowledgeBase from './KnowledgeBase/index.vue';

const data = ref({});
const modalVisible = ref(false);
const title = '文档';
const breadCrumb = ['文档'];
const getListType = ref(null);
const uploadRef = ref();
const searchKey = ref('');
const menukey = ref('2');

const onClickMenuItem = (key) => {
  menukey.value = key;
};

const openUploadModal = () => {
  uploadRef.value.visible = true;
};

const openFolderModal = () => {
  modalVisible.value = true;
};
</script>

<style lang="less" scoped>
:deep(.ly-card-body) {
  padding: 0 !important;
  height: 100%;
}
.layout-demo {
  height: 700px;
  background: var(--color-fill-2);
  border: 1px solid var(--color-border);
}
.layout-demo :deep(.arco-layout-sider) .logo {
  height: 32px;
  margin: 12px 8px;
  background: rgba(255, 255, 255, 0.2);
}
.layout-demo :deep(.arco-layout-sider-light) .logo {
  background: var(--color-fill-2);
}
.layout-demo :deep(.arco-layout-header) {
  height: 64px;
  line-height: 64px;
  background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer) {
  height: 48px;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  line-height: 48px;
}
.layout-demo :deep(.arco-layout-content) {
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}
</style>
